<template>
  <el-container>
    <el-header>
      <el-row type="flex" align="middle">
        <el-col :span="18">
          <h2>编辑人员信息</h2>
        </el-col>
        <el-col :span="6" :style="{ textAlign: 'right' }">
          <!-- filter -->
          <filter-view
            ref="filter"
            v-model="filterContent"
            @input="execFilter"
          />
          <span style="padding:0 0.5em"></span>
          <!-- add person -->
          <creator-view></creator-view>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="page-main">
      <el-alert
        v-if="!tableDataFilted"
        title="正在加载数据……"
        type="info"
        :closable="false"
      ></el-alert>
      <div v-if="tableDataFilted"></div>
      <el-table
        v-if="tableDataFilted"
        :data="tableDataFilted"
        style="min-width: 100%"
        height="calc(100vh - 140px)"
      >
        <el-table-column
          label="姓名"
          min-width="90"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="科室"
          min-width="130"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="editRow != scope.$index">{{
              scope.row.clientOffice
            }}</span>
            <el-select
              v-if="editRow === scope.$index"
              v-model="scope.row.clientOffice"
              placeholder="请选择"
            >
              <el-option
                v-for="item in clientOffice"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="班组"
          min-width="90"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="editRow != scope.$index">{{
              scope.row.clientGroup
            }}</span>
            <el-select
              v-if="editRow === scope.$index"
              v-model="scope.row.clientGroup"
              placeholder="请选择"
            >
              <el-option
                v-for="item in findGroup(scope.row.clientOffice)"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="资质"
          min-width="180"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="editRow != scope.$index">{{
              scope.row.clientRank
            }}</span>
            <el-select
              v-if="editRow === scope.$index"
              v-model="scope.row.clientRank"
              placeholder="请选择"
            >
              <el-option
                v-for="item in clientRank"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="类型"
          min-width="130"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="editRow != scope.$index">{{ scope.row.rank }}</span>
            <el-select
              v-if="editRow === scope.$index"
              v-model="scope.row.rank"
              placeholder="请选择"
            >
              <el-option
                v-for="item in rank"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="关注"
          min-width="130"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="warning"
              :icon="
                scope.row.interest === 1
                  ? 'el-icon-star-on'
                  : 'el-icon-star-off'
              "
              circle
              :plain="scope.row.interest === 1 ? false : true"
              size="mini"
              @click="
                () => {
                  if (scope.row.interest === 1) {
                    scope.row.interest = 0;
                  } else {
                    scope.row.interest = 1;
                  }
                  handleSave(scope.$index, scope.row);
                }
              "
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="权限"
          min-width="80"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="editRow != scope.$index">{{ scope.row.level }}</span>
            <el-select
              v-if="editRow === scope.$index"
              v-model="scope.row.level"
              placeholder="请选择"
            >
              <el-option
                v-for="item in level"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="100"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              size="mini"
              :disabled="editRow != -1"
              :style="{ opacity: editRow != -1 ? 0.5 : 1 }"
              v-if="editRow != scope.$index"
              @click="handleEdit(scope.$index, scope.row)"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-check"
              circle
              plain
              size="mini"
              v-if="editRow === scope.$index"
              @click="handleSave(scope.$index, scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-close"
              circle
              plain
              size="mini"
              v-if="editRow === scope.$index"
              @click="handleCancel(scope.$index, scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              size="mini"
              :disabled="editRow != -1"
              :style="{ opacity: editRow != -1 ? 0.5 : 1 }"
              v-if="editRow != scope.$index"
              @click="handleDelete(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
import filterView from "./components/FilterView";
import creatorView from "./components/CreatorView";
import { mapState } from "vuex";
export default {
  components: {
    filterView,
    creatorView
  },
  computed: {
    ...mapState({
      clientOffice: (state) => state.statics.clientOffice,
      clientRank: (state) => state.statics.clientRank,
      rank: (state) => state.statics.rank,
      level: (state) => state.statics.level,
      interestList: (state) => state.statics.interest,
      clientList: (state) => state.clientData.clientList,
    }),
    /*
    options: () => ({
      clientOffice: this.clientOffice,
      clientRank: this.clientRank,
      rank: this.rank,
      level: this.level,
      interestList: this.interestList,
    }),
    */
    // tableDataFilted() {
    //   if (!this.tableData) return [];
    //   return this.execFilter(this.tableData);
    // },
  },
  data() {
    return {
      tableData: null,
      tableDataFilted: null,
      originalData: null,
      originalRow: null,
      editRow: -1,
      filterContent: {
        clientOffice: [],
        clientRank: [],
        rank: [],
        level: [],
        interest: [],
      },
    };
  },
  methods: {
    execFilter() {
      console.log("execFilter");
      let arr = [];
      for (let i = 0; i < this.tableData.length; i++) {
        if (
          this.filterContent.clientOffice.indexOf(
            this.tableData[i].clientOffice
          ) > -1 &&
          this.filterContent.clientRank.indexOf(this.tableData[i].clientRank) >
            -1 &&
          this.filterContent.rank.indexOf(this.tableData[i].rank) > -1 &&
          this.filterContent.level.indexOf(this.tableData[i].level) > -1 &&
          this.filterContent.interest.indexOf(this.tableData[i].interest) > -1
        ) {
          arr.push(this.tableData[i]);
        }
      }
      this.tableDataFilted = arr;
      console.log(this.tableDataFilted);
    },
    findGroup(office) {
      for (let i = 0; i < this.clientOffice.length; i++) {
        if (this.clientOffice[i].value == office)
          return this.clientOffice[i].children;
      }
    },
    savaData(data) {
      this.axios
        .post("api/modify_security_data/", {
          user: this.$store.state.login.userbase,
          data: data,
        })
        .then((response) => {
          this.$store.commit("setResponse", response.data);
          if (response.data.status === 0) {
            this.$notify.success({
              title: "完成",
              message: "已保存" + data.name + "的信息",
            });
            // update store
            this.$store.commit("clientData/setClientList", this.tableData);
          } else {
            this.$notify.error({
              title: "错误",
              message: "保存人员信息错误",
            });
          }
        })
        .catch((exception) => {
          console.log(exception);
        });
    },
    handleEdit(index, data) {
      console.log(index);
      console.log(data);
      this.originalRow = JSON.stringify(data);
      this.editRow = index;
    },
    handleSave(index, data) {
      console.log(index);
      console.log(data);
      if (JSON.stringify(data) == this.originalRow) {
        this.$notify.warning({
          title: "未保存",
          message: "信息没有修改",
        });
      } else {
        this.savaData(data);
      }
      this.originalRow = null;
      this.editRow = -1;
    },
    handleCancel(index, data) {
      console.log(index);
      console.log(data);
      this.tableData[index] = JSON.parse(this.originalRow);
      this.originalRow = null;
      this.editRow = -1;
    },
    handleDelete() {
      this.$notify.error({
        title: "错误",
        message: "暂不提供此功能",
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = JSON.parse(JSON.stringify(this.clientList));
      this.$refs.filter.selectAll();
    });
  },
};
</script>

<style scoped>
.page-main {
  padding: 0;
  display: flex;
  justify-content: center;
  justify-items: center;
  text-align: center;
  align-content: center;
  align-items: center;
}
</style>
